<template>
  <view>
    <u-loading-icon :show="loading" text="加载中" textSize="18"></u-loading-icon>

    <u-list @scrolltolower="scrolltolower" :pagingEnabled="pagingEnabled" @scrollWithAnimation="true" :key="listKey">
      <u-list-item v-for="(item, index) in items" :key="index" :class="getItemClass(item)">
        <view @click="handleSubmit(item)" @longpress="handleLongPress(item)">
          <u-cell :title="`订单号：${item.poCode}`"></u-cell>
          <u-cell :title="`线体：${item.lineCode}`"></u-cell>
          <u-cell :title="`合并任务数：${item.count}   公共料数量: ${item.commonQty}  流水号：${index + 1}`"></u-cell>
        </view>
      </u-list-item>
    </u-list>
  </view>
</template>
<script>
import UList from "../../../../uview-ui/components/u-list/u-list.vue";
import UCell from "../../../../uview-ui/components/u-cell/u-cell.vue";
import UListItem from "../../../../uview-ui/components/u-list-item/u-list-item.vue";
import ULoadingIcon from "../../../../uview-ui/components/u-loading-icon/u-loading-icon.vue";
import {fastPick, poCodePickLists} from "@/api/work/wareHourse/poCodePick";

export default {
  components: {ULoadingIcon, UListItem, UCell, UList},
  data() {
    return {
      loading:false,
      pagingEnabled: true,
      items: [],
      listKey: Date.now(),
      total: 0,
      param: {
        pageNum: 0,
        pageSize: 10,
        poCode: null,
      },
    }
  },
  onLoad() {
    this.loadmore()
  },
  methods: {
    getItemClass(item) {
      if (item.count === item.commonQty) {
        return 'custom-common-list-item';
      }
      return item.selected ? 'custom-choose-list-item' : 'custom-list-item';
    },
    scrolltolower() {
      if (this.items.length >= this.total) {
        this.$modal.msgError("没有更多数据了");
        return;
      }
      this.loadmore()
    },
    loadmore() {
      this.loading = true;
      this.param.pageNum = this.param.pageNum + 1;
      poCodePickLists(this.param).then(res => {
        this.listKey = Date.now();
        this.total = res.total;
        if (res.rows.length > 0) {
          res.rows.forEach(item => {
            this.items.push(item)
          });
          console.log(res.rows)
        } else {
          this.$modal.msg("没有下架任务！");
        }
        this.loading = false;
      });
    },
    handleSubmit(row) {
      let url = '/pages/work/wareHouse/pick/poCodePick?poCode=' + row.poCode;
      uni.navigateTo({url: url});
    },
    handleLongPress(row) {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '请确定要对订单：' + row.poCode + '使用一键下架，并愿意承担后续责任',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击了确定');
            fastPick(row).then(() => {
              uni.showToast({
                title: '提交成功',
                icon: 'success',
                duration: 2000
              });
              row.selected = true;
            }).catch(err => {
              that.$modal.msg(err);
            });
          } else if (res.cancel) {
            console.log('用户点击了取消');
            // 在这里编写当用户点击取消后的逻辑代码
          }
        },
        fail: function (err) {
          console.error('显示模态对话框失败:', err);
        }
      });
    },
  }
}
</script>
<style>
.custom-list-item {
  background-color: #ADD8E6;

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}
.custom-choose-list-item {
  background-color: #CCCCCC;

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}

.custom-common-list-item {
  background-color: rgba(133, 232, 121, 0.81);

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}
</style>
